<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta charset="UTF-8" />
    <title>dialog</title>
    <script src="./app.js"></script>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
      }

      h1 {
        margin-block-start: 0px;
        margin-block-end: 18px;
        font-family: "PingFangSC-Medium";
        font-size: 16px;
        color: #111111;
        line-height: 22px;
        -webkit-user-select: none;
        user-select: none;
      }

      p {
        margin-block-start: 0px;
        margin-block-end: 0px;
        font-family: "PingFangSC-Regular";
        font-size: 14px;
        color: #111111;
        line-height: 20px;
      }

      a {
        color: #1382ef;
      }

      button {
        outline: none;
        border: none;
        border-image: none;
        margin: 0px;
        padding: 0px;
        background-color: transparent;
        font-family: "PingFangSC-Regular";
        font-size: 14px;
        height: 47px;
        -webkit-user-select: none;
        user-select: none;
      }

      button:not(:last-child) {
        border-right: 1px solid #f6f6f6;
      }

      .button-col24 {
        width: 100%;
      }

      .button-col12 {
        width: 50%;
      }

      #dialog {
        text-align: left;
        border-radius: 10px;
        background: white;
      }

      #dialog-body {
        padding: 24px 20px 19px 20px;
        display: flex;
        flex-flow: column;
        align-items: center;
        word-wrap: break-word;
      }

      #title {
        display: inline-block;
        text-align: center;
      }

      #message {
        display: inline-block;
        text-align: left;
        max-height: 400px;
      }

      #separate-line {
        margin: 0px 3px 0px 3px;
        border-top: 1px solid #f6f6f6;
        height: 0px;
        -webkit-user-select: none;
        user-select: none;
      }

      #dialog-footer {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-flow: row;
      }

      #confirm {
        color: #1382ef;
      }

      #cancel {
        color: #111111;
      }
    </style>
    <script>
      var dialogId = "{{ dialogId }}";

      function onButtonClick(buttonId) {
        app.closeDialog({
          dialogId: dialogId,
          buttonId: buttonId,
        });
      }
    </script>
  </head>

  <body>
    <div id="dialog">
      <div id="dialog-body">
        <h1 id="title">{{ title }}</h1>
        <p id="message">{{ message }}</p>
      </div>
      <div id="separate-line"></div>
      <div id="dialog-footer">{{ buttons }}</div>
    </div>
  </body>
</html>
